<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单数据绑定</title>
</head>
<body>
<div id="app">
    <form action="http://www.baidu.com">
        <div>
            <span>用户名:</span>
            <span>
						<input name="username" type="text"  v-model="username"/>
					</span>
        </div>
        <div>
            <span>性别:</span>
            <span>
						<!--label相当于合并一个div 需要id-for进行关联  -->
						<input name="gender" type="radio" value="男" id="man"
                               v-model="gender"/>
						<label for="man">男</label>
						<input name="gender" type="radio" value="女" id="women"
                               v-model="gender"/>
						<label for="women">女</label>
					</span>
        </div>

        <div>
            <span>爱好:</span>
            <span>
						<input name="hobbys" type="checkbox" value="敲代码" v-model="hobbys"/>敲代码
						<input name="hobbys" type="checkbox" value="打游戏" v-model="hobbys"/>打游戏
						<input name="hobbys" type="checkbox" value="喝水" v-model="hobbys"/>喝水
					</span>
        </div>

        <div>
            <span>部门:</span>
            <span>
						<!-- 设定下拉框多选 -->
						<select name="dept" v-model="dept"
                                multiple="true">
							<option value="财务部">财务部</option>
							<option value="研发部">研发部</option>
							<option value="测试部">测试部</option>
						</select>
					</span>
        </div>
        <div>
            <span>用户详情</span>
            <textarea v-model="text">
            </textarea>
        </div>
        <div>
            <!-- 让默认的行为失效 -->
            <button @click.prevent="submit">提交</button>
        </div>
    </form>
</div>
<script src="../js/vue.js" ></script>
<script>
    const app = new Vue({
        el: '#app',
        data: {
            username: 'test',
            gender: '女',
            //如果数据项有多项 则使用数组接收
            hobbys: ['敲代码','喝水'],
            //定义下拉框 如果单个数据使用'' 多个数据使用数组
            //dept: '研发部'
            dept: ['财务部','研发部'],
            text: 'texttexttext'
        },
        methods: {
            submit(){
                console.log("username数据:"+this.username)
                console.log("sex数据:"+this.gender)
                console.log("hobby数据:"+this.hobbys)
                console.log("dept数据:"+this.dept)
            }
        }
    })
</script>
</body>
</html>